import React, { Component } from 'react'
import { connect } from 'dva';
import { Table, Radio } from 'antd';
import Form from './SearchForm'

import styles from '../style.less';

export interface Props {
  dispatch?: Function,
  onChanges?: Function,
  children?: React.ReactNode,
  loading?: boolean,
  deviceList?: {
    data: Array<any>,
    dataCnt: number
  },
  buttons?: Array<any>,
  dict?: object,
  isReset: any
}

const ONE_PAGE_SIZE = 10;

@connect(({ qrcode_device, loading, menu }) => ({
  deviceList: qrcode_device.deviceList || {},
  dict: qrcode_device.dict,
  buttons: menu.buttons,
  loading: loading.effects['qrcode_device/devicePage']
}))
class XlPosition extends Component<Props, any> {
  constructor(props) {
    super(props);
    this.initCurrent = this.initCurrent.bind(this);
  }
  state = {
    current: 1,
    selectedRowKeys: [],
    belongId: '',
    name: ''
  };

  queryData(offset = 1, size = ONE_PAGE_SIZE) {
    const { dispatch } = this.props;
    dispatch({
      type: 'qrcode_device/devicePage',
      payload: {
        pageNum: offset,
        pageSize: size,
      },
    });
  }

  initCurrent() {
    this.setState({
      current: 1
    })
  }

  onSelectChange = (selectedRowKeys, rowData) => {
    this.setState({
      selectedRowKeys,
      rowData
    }, () => {
      this.props.onChanges(selectedRowKeys.map(it => {
        const ans = it.split('%%');
        return { belongId: ans[0], name: ans[1], type: '3' }
      }));
    })
  };

  componentDidMount() {
    this.queryData();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.isReset) {
      this.setState({
        selectedRowKeys: [],
      }, () => {
        this.props.onChanges(this.state.selectedRowKeys.map(it => {
          const ans = it.split('%%');
          return { belongId: ans[0], name: ans[1], type: '3' }
        }));
      })
    }
  }

  render() {
    const { buttons, deviceList = { data: [], dataCnt: 0 } } = this.props;
    const btnList = {};
    if (Array.isArray(buttons)) {
      buttons.forEach(item => {
        btnList[item.name] = item.name
      });
    }

    const { data = [], dataCnt } = deviceList;
    const ans = data && Array.isArray(data) ? data.map((item, index) => ({
      key: `${item.id}%%${item.name}`,
      id: item.id, // 主键编号
      name: item.name,  // 设备名称
      typeName: item.typeName,  // 设备类型
      location: item.installLocationName ? item.installLocationName : '/',  // 安装位置
      statusName: item.statusName  // 运行状态
    })
    ) : [];
    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSize: ONE_PAGE_SIZE,
      onChange: (current) => {
        this.setState({ current });
        this.queryData(current)
      },
    };
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: this.onSelectChange
    };
    const columns = [{
      title: '设备名称',
      dataIndex: 'name'
    }, {
      title: '设备类型',
      dataIndex: 'typeName'
    }, {
      title: '安装位置',
      dataIndex: 'location'
    }, {
      title: '运行状态',
      dataIndex: 'statusName'
    }];
    return (
      <div>
        <Form current={this.state.current} initCurrent={this.initCurrent} new={!!btnList['新增']} />
        <Table
          columns={columns}
          pagination={pagination}
          dataSource={ans}
          bordered
          loading={this.props.loading}
          rowSelection={rowSelection}
        />
      </div>
    );
  }
}

export default XlPosition;
